<template>
  <div class="works-cochain">
      <el-form :model="searchForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <div class="top-seek">
            <el-input v-model="searchForm.name" placeholder="搜索作品" class="seek-inp"> <i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
            <el-button  @click="getUserWorks" type="primary" class="seek">查询</el-button>
            <!-- 检索审核状态--------------------------------- -->
            <div class="audit">
              <el-select v-model="searchForm.authStatus" placeholder="认证状态">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <el-button  @click="toPage" class="putIn">提交认证</el-button>
        </div>
      </el-form>
        <!-- 表格---------------------------------------------------- -->
        <div >
            <el-table
              :data="tableData">
              <el-table-column
                prop="name"
                label="作品名称"
                width="150">
              </el-table-column>
              <el-table-column
                prop="cover"
                label="作品图片"
                >
                <template slot-scope="scope">
                  <el-image class="cover-img" :src="scope.row.cover"></el-image>
                  <!-- <img :src="scope.row.cover" alt=""> -->
                </template>
              </el-table-column>
              <el-table-column
                prop="authStatus"
                label="认证状态"
                >
                <template slot-scope="scope">
                  {{identificationStatus[scope.row.authStatus]}}
                </template>
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="提交时间"
                >
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                  <el-button type="primary" size="small" v-if="scope.row.authStatus==3|| scope.row.authStatus==1" @click="toPage(scope.row.workId,true)">详情</el-button>  
                  <el-button type="primary" size="small" v-if="scope.row.authStatus==2" @click="toPage(scope.row.workId)">重新提交</el-button>  
                </template>
              </el-table-column>
            </el-table>
        </div>
      <!-- 分页-------------------------------------------- -->
      <div class="mineEpaging">
        <el-pagination
          class="pagings"
          background
          v-if='pageTotal > 0'
          :page-sizes="paginations.pageSizes"
          :page-size="paginations.pageSize"
          :layout="paginations.layout"
          :total="pageTotal"
          :current-page='paginations.page'
          @current-change='handleCurrentChange'
          @size-change='handleSizeChange'
          >
        </el-pagination>
      </div>
    </div>
</template>

<script>
import { getWorkList,payAndAuth } from '@/api/work'
export default {
data(){
  return{
    options:[
      {
        label: '未提交',
        value: '0'
      },
      {
        label: '审核中',
        value: '1'
      },
      {
        label: '审核未通过',
        value: '2'
      },
      {
        label: '审核通过',
        value: '3'
      },
    ],

    identificationStatus : {
        '0': '未提交',
        '1': '审核中',
        '2': '审核未通过',
        '3': '审核通过',
      },
    input:'',
    searchForm:{
      name: '',
      authStatus: ''
    },
    rules:{},
    // 审核状态
    value:'',
    // 表格
    tableData:[],
    pageTotal:0,
    paginations: {
        page: 1,  // 当前位于哪页
        pageSize: 10,   // 1页显示多少条
        pageSizes: [5, 10, 15, 20],  //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
      }
  }
},
mounted(){
  this.getUserWorks();
},
methods:{
  toPage(e,isEdit){
    console.log('static',111);
    this.$router.push(`/compileInfo?workId=${e}&isEdit=${isEdit}`); 
  },
  details(){
    this.$router.push('/compileInfo');
    payAndAuth().then((res)=>{

    })
  },
  getUserWorks(){
    getWorkList({
      // this.searchForm,
      pageSize: this.paginations.pageSize,
      page: this.paginations.page
    }).then((res)=>{
      // console.log(res.data.workList.rows);
      this.tableData = res.data.workList.rows;
      this.pageTotal = res.data.workList.count;
    })
  },
  handleCurrentChange(page){
    this.paginations.page = page;
    this.getUserWorks()
  },
    // 每页多少条切换 pageSize
    handleSizeChange(page_size){
      this.paginations.pageSize = page_size;
      console.log('static',page_size);
      this.getUserWorks()
    }
  }
}
</script>

<style scoped lang="less">
.el-main{
  .top-seek{
  display: flex;
  margin-left: 100px;
    .seek-inp{
      margin-right: 100px;
      width: 610px;
    }
    .seek{
      margin: 0px 55px 0 -170px;
      z-index: 999;
    }
    .audit{
      margin-right: 70px;
    }
  }
  .cover-img{
    width: 100px;
    height: 100px;
  }


.partPage{
  margin-left: 740px;
}
.mineEpaging{
    margin: 0px 0 0px 700px;
  }
}

</style>